<!--
 * @Description: 
 * @Author: wangqi
 * @Date: 2022-04-12 18:08:21
 * @LastEditTime: 2022-04-18 09:32:53
-->
<!-- 
<template>
  <div id="map" class="map"></div>
</template> -->
<!-- <script setup>
import { onMounted } from 'vue'
import 'ol/ol.css'
import { Map, View, Feature, Collection, Overlay } from 'ol'
import { fromLonLat } from 'ol/proj'
import { Point, LineString, Polygon, Circle } from 'ol/geom'

import { Tile as TileLayer, Graticule, Image, Vector as VectorLayer, WebGLTile } from 'ol/layer'

import { OSM, ImageStatic, XYZ, Vector as VectorSource, GeoTIFF } from 'ol/source'

// import GeoTIFF from 'ol/source/GeoTIFF'
// import TileLayer from 'ol/layer/WebGLTile'

onMounted(() => {
  const ndvi = ['/', ['-', ['band', 2], ['band', 1]], ['+', ['band', 2], ['band', 1]]]

  const ndwi = ['/', ['-', ['band', 3], ['band', 1]], ['+', ['band', 3], ['band', 1]]]

  const source = new GeoTIFF({
    sources: [
      {
        url: '/public/static/28.tif', //'/static/28.tif',
        // bands: [1],
        min: 0,
        nodata: 0,
        max: 65535,
      },
    ],
    normalize: false,
    opaque: false,
    transition: 200,
  })

  let webgltileLayer = new WebGLTile({
    source: source,
    style: {
      color: [
        'color',
        // red: | NDVI - NDWI |
        ['*', 255, ['abs', ['-', ndvi, ndwi]]],
        // green: NDVI
        ['*', 255, ndvi],
        // blue: NDWI
        ['*', 255, ndwi],
        // alpha
        ['band', 1],
      ],
    },
  })

  const map = new Map({
    target: 'map',
    layers: [
      new TileLayer({
        title: '高德-地图',
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
        isGroup: true,
      }),
    ],
    view: source.getView(),
    // view: new View({
    //   center: fromLonLat([117.22151562369, 31.822299692732]),
    //   zoom: 10,
    // }),
  })

  map.addLayer(webgltileLayer)
  console.log(webgltileLayer, 'webgltileLayer')
})
</script> -->

<!-- <style lang="scss" scope>
  .map {
    height: 100%;
    width: 100%;
  }
</style> -->
